<template>
	<view class="menu">
		<view class="menu_item" v-for="(item, index) in data" :key="index" @click="$rui.route(item.url)">
			<view class="menu_item_box">
				<rui-icons :type="item.icon" size="35"></rui-icons>
				<view class="menu_item_box_name">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="menu_item" @click="logout">
			<view class="menu_item_box">
				<rui-icons type="start" color="#fff" size="35"></rui-icons>
				<view class="menu_item_box_name">
					退出
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		userStore
	} from '@/store';

	let user = userStore();


	let data = [{
			name: "系统设置",
			icon: "system",
			url: "/pages/setting/system/system",
			promise: 13
		},
		{
			name: "网络设置",
			icon: "inter",
			url: "/pages/setting/network/network",
			promise: 13
		},
		{
			name: "故障代码",
			icon: "fault",
			url: "/pages/setting/fault/fault",
			promise: 13
		},
		{
			name: "用户管理",
			icon: "users",
			url: "/pages/user/index/index",
			promise: 13
		},
		{
			name: "数据管理",
			icon: "datas",
			url: "/pages/data/index/index",
			promise: 13
		},
		{
			name: "卡匣管理",
			icon: "chest",
			url: "/pages/device/chest/chest",
			promise: 13
		},
		{
			name: "灭菌记录",
			icon: "record",
			url: "/pages/data/record/record",
			promise: 13
		},
		{
			name: "培养箱",
			icon: "box",
			url: "/pages/device/incubator/incubator",
			promise: 13
		},
	]

	const logout = () => {
		user.logout()
		uni.$rui.cache.remove("USER_INFO")
		uni.$emit('user', {
			msg: '退出成功',
			type: "logout"
		})
	}
</script>

<style lang="scss" scoped>
	.menu {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(3, 115px);
		gap: 15px;
		height: 100%;

		&_item {
			background: var(--bg);
			text-align: center;
			padding: 15px;
			border-radius: 5px;
			display: flex;
			justify-content: center;
			align-items: center;

			&:active {
				background: #eee;
			}

			&:last-child {
				background: var(--color);
				color: #fff;
			}

			&_box {
				&_name {
					margin-top: 5px;
				}
			}
		}
	}
</style>